<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
  },
}
</route>

<template>
  <view>
    <!-- 导航栏 -->
    <wd-navbar safeAreaInsetTop left-arrow title="答题卡" @click-left="emit('back')"></wd-navbar>
    <!-- 答题状态 -->
    <view class="answer-status">
      <view>
        <text class="status1"></text>
        <text>未作答</text>
      </view>
      <view>
        <wd-icon name="check-circle-filled" size="30rpx" color="#3670F7"></wd-icon>
        <text>答对</text>
      </view>
      <view>
        <wd-icon name="close-circle-filled" size="30rpx" color="#F73A4A"></wd-icon>
        <text>答错</text>
      </view>
    </view>
    <!-- 题目编号 -->
    <view class="topic-number">
      <view v-for="(item, index) in props.sheetInfo" :key="item.id + index">
        <view>{{ item.quTypeName }}</view>
        <view>
          <text
            v-for="e in item.data"
            :key="e.id"
            class="item"
            :class="`status-${(e.isRight && e.isRight === 'true') || e.quType === '5' ? 2 : e.isRight && e.isRight === 'false' ? 3 : 1}`"
            @click="handleToThisTopic(e.sort - 1)"
          >
            {{ e.sort }}
            <text v-if="e.active" class="current-topic">当前</text>
          </text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
const emit = defineEmits(['back', 'toThisTopic'])

const props = defineProps({
  sheetInfo: {
    type: Array as any,
    required: true,
  },
})

/* 跳转到所点击题目 */
const handleToThisTopic = (index: number) => {
  emit('toThisTopic', index)
}
</script>

<style scoped lang="scss">
/* 答题状态 */
.answer-status {
  display: flex;
  flex-wrap: wrap;
  gap: 36rpx;
  align-items: center;
  justify-content: center;
  padding: 10rpx;
  margin: 20rpx 0;
  background-color: #f5f5f7;
  & > view {
    display: flex;
    gap: 12rpx;
    align-items: center;
    text:nth-child(1) {
      box-sizing: border-box;
      display: inline-block;
      width: 30rpx;
      height: 30rpx;
      border-radius: 100%;
    }
    .status1 {
      background-color: #fff;
      border: solid 1rpx #ccc;
    }
    text:nth-child(2) {
      margin-left: 5rpx;
      font-size: 26rpx;
      font-weight: 500;
      color: #333;
    }
  }
}
/* 题目编号 */
.topic-number {
  min-height: calc(100vh - 250rpx);
  max-height: calc(100vh - 250rpx);
  padding: 38rpx 24rpx;
  overflow: auto;
  background-color: #fff;

  & > view {
    view:nth-child(1) {
      font-size: 32rpx;
      font-weight: 700;
      color: #3d3d3d;
    }
    view:nth-child(2) {
      display: flex;
      flex-wrap: wrap;
      gap: 40rpx 60rpx;
      margin: 30rpx 32rpx;

      .item {
        position: relative;
        display: inline-block;
        width: 50rpx;
        height: 50rpx;
        font-size: 24rpx;
        font-weight: 700;
        line-height: 50rpx;
        text-align: center;
        border: solid 1rpx #ccc;
        border-radius: 100%;
      }
      /* 未作答 */
      .status-1 {
        color: #000;
        background: #fff;
      }
      /* 答对 */
      .status-2 {
        color: #fff;
        background: #3670f7;
      }
      /* 答错 */
      .status-3 {
        color: #fff;
        background: #f73a4a;
      }
      /* 当前题 */
      .current-topic {
        position: absolute;
        bottom: -20rpx;
        left: 50%;
        display: inline-block;
        width: 42rpx;
        height: 24rpx;
        font-size: 12rpx;
        line-height: 24rpx;
        color: #fff;
        text-align: center;
        white-space: nowrap;
        background: #000;
        transform: translate(-50%, 0%);
      }
    }
  }
}
</style>
